<template>
  <el-dialog
    modal-class="rb-dialog"
    v-model="dialogVisible"
    :title="title"
    v-bind="$attrs"
    :before-close="handleClose"
  >
    <slot></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});
const dialogVisible = ref(false);
const handleClose = (done) => {
  done();
};
const open = () => {
  dialogVisible.value = true;
};
const close = () => {
  dialogVisible.value = false;
};
defineExpose({
  open,
  close,
});
</script>

<style lang='scss'>
.rb-dialog{
    .el-dialog{
        border-radius: 8px;
        background-image: var(--bg-gradient-color);
        padding: 36px;
    }
    .el-dialog__header{
        padding-bottom: 0;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #111111;
    }
}
</style>